<template>
	<div class="toolsCodeBanner" ref="toolsCodeBanner">
		<section class="h100">
			<!--工具条-->
			<el-row class="teamToolbar">
				<el-form :inline="true" :model="filters" v-if="!serchShow">
					<!-- <el-col :span="7"> -->
					<el-form-item label="关键词查询" class="form-item" :label-width="labelWidth2" style="float:left">
						<el-input placeholder="关键词查询" icon="search" size="small" v-model="filters.taskKeyword" :on-icon-click="handleKeySearch">
						</el-input>
					</el-form-item>
					<!--  <el-form-item label="所属部门" class="form-item" style="float:left">
            <BelongTeam size="small" @changes="getBelongTeam2" style="line-height:58px"></BelongTeam>
          </el-form-item> -->
					<!-- </el-col> -->
				</el-form>
				<el-col :span="7" class="serchDiv" @click.native="serchShow=!serchShow">
					<div v-show="!serchShow" class="askDiv">更多查询方式</div>
					<div v-show="serchShow" class="askDiv">返回精简查询模式</div>
				</el-col>
				<el-col :span="2" class="tcs">
					<el-button @click.native="postTaskSyn" size="small" type="text"><i class="iconfont icon-paixu- mr-5"></i>同步</el-button>
				</el-col>
				<el-col :span="2" class="tcs">
					<el-button @click.native="getTasksList" type="primary">查询</el-button>
				</el-col>
			</el-row>

			<div v-if="serchShow" class="serchMore">
				<el-row class="toolbar">
					<el-form :inline="true" :model="filters">
						<el-form-item label="所属部门" class="form-item" :label-width="labelWidth2">
							<BelongTeam size="small" @changes="getBelongTeam" class="form-width"></BelongTeam>
						</el-form-item>
						<el-form-item label="关键词查询" class="form-item" :label-width="labelWidth2">
							<el-input class="form-width" placeholder="关键词查询" icon="search" size="small" v-model="filters.taskKeyword">
							</el-input>
						</el-form-item>
						<el-form-item label="工作类别" :label-width="labelWidth2">
							<Category :clearable="true" :val="workTypeId" @changes="getCategoryVal" class="form-width"></Category>
						</el-form-item>
						<el-form-item label="变电站" :label-width="labelWidth2">
							<el-select v-model="filters.sbId" multiple @change="getSubVal" filterable placeholder="请选择" class="form-width">
								<el-option v-for="item in substations" :key="item.id" :label="item.name" :value="item.id">
								</el-option>
							</el-select>
						</el-form-item>
						
						<el-form-item label="专业" class="form-item" :label-width="labelWidth2">
							<el-select placeholder="请选择" v-model="filters.speciality" class="form-width" clearable>
								<el-option v-for="(item,index) in taskDatass.speciality" :key="item" :label="index" :value="item">
								</el-option>
							</el-select>
						</el-form-item>

						<el-form-item label="计划时间段" :label-width="labelWidth2">
							<el-form-item>
								<el-date-picker type="date" placeholder="选择日期" v-model="filters.startTime" class="form-width" @change="checkstartDate"></el-date-picker>
							</el-form-item>
							<span class="line">————</span>
							<el-form-item>
								<el-date-picker type="date" placeholder="选择日期" v-model="filters.endTime" class="form-width" @change="checkendDate"></el-date-picker>
							</el-form-item>
						</el-form-item>

						<!--<el-col :span="2" class="tc">-->
						<!--<el-button @click.native="postTaskSyn" size="small" type="text"><i class="iconfont icon-jihuaxingzhi- mr-5"></i>自定义列</el-button>-->
						<!--</el-col>-->
						<!--<el-col :span="2" class="tc">-->
						<!--<el-button @click.native="popupShow=true" size="small" type="text"><i class="iconfont icon-shitu- mr-5"></i>视图</el-button>-->
						<!--</el-col>-->
					</el-form>
				</el-row>
			</div>
			<!--计划库开始-->
			<div class="pt task-list" style="padding-top:0;margin-top:0">
				<div class="task-team-box h100">
					<el-table height="577" ref="multipleTable" :data="planTable" :height="tableH" border tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
						<el-table-column type="selection" width="55">
						</el-table-column>
						<el-table-column sortable prop="planCode" label="计划编号" width="170">
						</el-table-column>
						<el-table-column prop="content" label="工作内容" width="220">
						</el-table-column>
						<el-table-column sortable label="计划开始时间" prop="planWorkStrart" width="150">
						</el-table-column>
						<el-table-column sortable label="计划结束时间" prop="planWorkEnd" width="150">
						</el-table-column>
						<el-table-column prop="workPlace" label="地点" show-overflow-tooltip>
						</el-table-column>
					</el-table>
					<el-pagination class="mt-10" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.curPage" :page-sizes="[25, 50, 100]" :page-size="page.size" layout="total, sizes, prev, pager, next, jumper" :total="page.total">
					</el-pagination>
				</div>
			</div>
		</section>
	</div>
</template>

<script>
	import Popup from '../../components/Popup'
	import BelongTeam from '../../components/belongTeam'
	import Category from '../../components/category'
	import * as task from '../../api/task';
	import { getSubstationList } from '../../api/api';
	export default {
		components: {
			Popup,
			BelongTeam,
			Category
		},
		data() {
			return {
				dialogTaskDetail: {
					show: false,
					id: '',
				},
				belongTeamId: '',
				radio3: '已逾期',
				filters: {
					belongDepartId: '',
					taskType: '',
					sbId: [],
					type: '',
					taskKeyword: '',
					startTime: this.baseJs.getCurrentMonthFirst(),
					endTime: this.baseJs.getCurrentMonthLast(),
					startTimes: this.baseJs.getCurrentMonthFirst() + ' 00:00',
					endTimes: this.baseJs.getCurrentMonthLast() + ' 23:59',
					speciality: ''
				},
				// pickerOptions: {
				//   shortcuts:this.baseJs.pickerOptions,
				//   val:[this.baseJs.getCurrentMonthFirst(),this.baseJs.getCurrentMonthLast()],
				//   startTime :this.baseJs.getCurrentMonthFirst(),
				//   endTime :this.baseJs.getCurrentMonthLast(),
				// },
				workTypeId: [],
				substations: [],
				popupShow: false,
				planTable: [],
				page: {
					curPage: 1,
					total: 0,
					size: 25,

				},
				serchShow: false,
				importPopupShow: false,
				labelWidth: '70px',
				labelWidth2: '85px',
				tableH: 200,
				taskDatass: {
					speciality: [],
				},
			}
		},
		methods: {
			// getPlanTime(val){
			//   let times=val.split(' - ')
			//   this.pickerOptions.startTime=times[0];
			//   this.pickerOptions.endTime=times[1];
			//   this.getTasksList()
			// },
			handleKeySearch() {
				this.belongTeamId = '';
				this.filters.sbId = [];
				this.filters.startTimes = this.baseJs.getCurrentMonthFirst() + ' 00:00';
				this.filters.endTimes = this.baseJs.getCurrentMonthLast() + ' 23:59';
				this.filters.type = '';
				this.getTasksList();
			},
			getSubVal(val) {
				// this.getTasksList();
			},
			//级联菜单改变值
			getCategoryVal(val) {
				this.filters.type = val[val.length - 1]
				// this.getTasksList();
			},
			closeTaskDialog(val) {
				this.dialogTaskDetail.show = val;
			},
			getBelongTeam(id) {
				this.belongTeamId = id;
				this.filters.sbId = [];
				getSubstationList({
					'departId': this.belongTeamId
				}).then(res => {
					this.substations = res.obj;
				});
			},
			/*getBelongTeam2(id){
			  this.belongTeamId=id;
			  this.filters.sbId=[];
			  this.filters.startTimes=this.baseJs.getCurrentMonthFirst();
			  this.filters.endTimes=this.baseJs.getCurrentMonthLast();
			  this.filters.type='';
			  // this.getTasksList();
			},*/
			getTasksList() {
				task.tasksList({
					'departId': this.belongTeamId,
					'state1': 30,
					'state2': 30,
					'workPlaceId': this.baseJs.changeArrayToStr(this.filters.sbId),
					'startTime': this.filters.startTimes,
					'endTime': this.filters.endTimes,
					'taskKeyword': this.filters.taskKeyword,
					'specialityId': this.filters.speciality,
					// 'startTime':this.pickerOptions.startTime+" 00:00",
					// 'endTime':this.pickerOptions.endTime+" 23:59",
					'workTypeId': this.filters.type,
					'page': this.page.curPage,
					'rows': this.page.size
				}).then(data => {
					this.planTable = data.obj;
					this.page.total = data.total
				});
			},
			handleSelectionChange(val) {
				this.SelectVal = this.baseJs.changeArrayToStr(val, ',', 'id')
			},
			handleSizeChange(val) {
				this.page.size = val
				this.getTasksList()
			},
			handleCurrentChange(val) {
				this.page.curPage = val
				this.getTasksList()
			},
			postTaskSyn() {
				if(this.planTable.length) {
					if(!this.SelectVal) {
						this.$confirm('您未选择相应的任务，确定继续将同步全部数据?', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							store.commit('commonLoading', true)
							task.taskSyn({
								'departId': this.belongTeamId
							}).then(data => {
								this.getTasksList()
							});
							this.$confirm('同步成功是否跳转到工单管理?', '提示', {
								confirmButtonText: '确定',
								cancelButtonText: '取消',
								type: 'warning'
							}).then(() => {
								this.$router.push({
									path: '/taskTeamBition'
								});
							}).catch(() => {
								return false;
							});
						}).catch(() => {
							return false;
						});
					} else {
						task.taskSyn({
							taskIds: this.SelectVal
						}).then(data => {
							this.getTasksList();
							this.$confirm('同步成功是否跳转到工单管理?', '提示', {
								confirmButtonText: '确定',
								cancelButtonText: '取消',
								type: 'warning'
							}).then(() => {
								this.$router.push({
									path: '/taskTeamBition'
								});
							}).catch(() => {
								return false;
							});
						})
					}
				} else {
					this.$message({
						message: '暂时没有数据同步！',
						type: 'warning'
					});
				}

			},
			//判断选择日期是否规范
			checkstartDate(obj) {
				if(obj) {
					this.filters.startTimes = obj + ' 00:00';
				} else {
					this.filters.startTimes = obj;
				}
				this.filters.startTime = this.baseJs.formatDate.parse(obj, 'yyyy-MM-dd');
				this.checkDate();
				// this.getTasksList();      
			},
			checkendDate(obj) {
				if(obj) {
					this.filters.endTimes = obj + ' 23:59';
				} else {
					this.filters.endTimes = obj;
				}
				this.filters.endTime = this.baseJs.formatDate.parse(obj, 'yyyy-MM-dd');
				this.checkDate();
				// this.getTasksList();
			},
			//判断选择日期是否规范
			checkDate(obj) {
				var date1 = this.filters.startTimes;
				var date2 = this.filters.endTimes;
				this.filters.startTimess = (date1 == '') ? '' : this.baseJs.formatDate.format(new Date(date1), 'yyyy-MM-dd') + ' 00:00';
				this.filters.endTimess = (date2 == '') ? '' : this.baseJs.formatDate.format(new Date(date2), 'yyyy-MM-dd') + ' 23:59';
				var beginTime = (new Date(this.filters.startTimess)).getTime();
				var endTime = (new Date(this.filters.endTimess)).getTime();
				if(beginTime > endTime) {
					if(obj == 0) {
						this.$alert('开始时间不能大于结束时间！', '错误', {
								type: "error"
							})
							.then(() => {
								this.filters.startTime = '';
							});
					} else {
						this.$alert('结束时间不能小于开始时间！', '错误', {
								type: "error"
							})
							.then(() => {
								this.filters.endTime = '';
							});
					}
				}
			},

		},
		mounted() {
			task.pageData().then(data => {
				this.taskDatass.speciality = data.obj.speciality;
				console.log(this.taskDatass.speciality);
			});
			this.tableH = this.$refs.toolsCodeBanner.clientHeight - 10 - 52 - 36;
			this.getTasksList();
			//		    console.log(taskJson)
			//      this.taskList=taskJson
		}
	}
</script>

<style lang="scss">
	.toolsCodeBanner {
		height: 100%;
		width: 100%;
	}
	
	.serchMore+.task-list {
		padding-top: 60px;
		margin-top: -60px
	}
	
	.task-list {
		padding-top: 60px;
		margin-top: -60px
	}
	
	.teamToolbar {
		height: 58px;
		line-height: 58px;
		position: relative;
		z-index: 1;
		border: solid 1px #b8c5ce;
		border-width: 1px 0;
		padding: 0 20px;
		background-color: #eff4f5;
		.el-form-item__content {
			vertical-align: middle
		}
	}
	
	.toolbar {
		background: #eef1f6;
		padding-bottom: 0px 0px 10px 0px;
		margin-bottom: 10px;
		position: relative;
		border-bottom: 1px solid #b8c5ce;
		.form-width {
			width: 184px;
		}
		.line {
			display: inline-block;
			width: 72px;
			text-align: center;
			margin-right: 10px;
		}
	}
	
	.askDiv {
		cursor: pointer;
	}
	
	.task-team-box {
		padding: 10px;
		width: 100%;
		overflow-x: auto;
		.task-list-box {
			box-sizing: content-box;
			width: 268px;
			position: relative;
			padding: 0 10px;
			margin-right: 10px;
			background-color: #eff3f5;
			border-radius: 8px;
			overflow: hidden;
			.header {
				height: 48px;
				line-height: 48px;
				h4 {
					color: #34495e;
					font-size: 14px;
				}
			}
			.body {
				position: absolute;
				top: 48px;
				right: 10px;
				bottom: 0;
				left: 10px;
				height: auto;
				overflow-y: auto;
				.div-ul,
				.dragArea {
					height: 100%
				}
				.dragArea>span {
					display: block;
					height: 100%;
				}
				.div-li {
					width: 100%;
					overflow: hidden;
					margin-bottom: 10px;
					border-radius: 4px;
					background-color: #fff;
					box-shadow: rgba(52, 73, 94, .2) 2px 2px 4px;
					.el-checkbox__inner {
						z-index: 0;
					}
					.li-top {
						padding: 14px
					}
					.li-footer {
						height: 24px;
						line-height: 24px;
						background-color: #f2faff;
						color: #22a4ff;
						font-size: 12px;
						padding: 0 10px;
						text-align: right;
					}
				}
			}
			&:last-child {
				.li-top {
					color: #b8c4ce;
					font-size: 14px;
				}
				.body .div-li .li-footer {
					background-color: #f8f9fa;
					color: #b8c4ce;
				}
			}
		}
	}
	
	.screen-box {
		width: 100%;
		height: auto;
		padding: 0 20px;
		.screen-box-line {
			border-bottom: solid 1px #d7dcde;
			.title {
				height: 40px;
				line-height: 40px;
				color: #34495e;
				font-size: 14px;
			}
			.select {
				height: 40px;
				line-height: 40px;
			}
			.person-line {
				height: 30px;
				line-height: 30px;
				margin-bottom: 10px;
				font-size: 14px;
				color: #7b8b95
			}
		}
	}
	
	.tcs {
		/* right: 10px;
    position: absolute; */
		float: right;
		margin-left: 0;
	}
	
	.serchDiv {
		height: 58px;
		font-weight: 400;
		line-height: 58px;
		font-size: 16px;
		color: #20a0ff;
	}
</style>